<template>
  <div class="login_wrap">
    <div class="login_logo"></div>
    <div class="login_form" align="center">
      <el-form ref="form" :rules="rules" :model="form" label-width="0px" style="width:322px;margin-top:87px;">
        <el-form-item prop="username">
          <el-input v-model="form.username" maxlength="30" placeholder="身份证号码/邮箱" class="account" autofocus></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="form.password" maxlength="30" placeholder="密码" class="margin_top password"
                    show-password></el-input>
        </el-form-item>
        <el-form-item prop="captcha">
          <el-col :span="11">
            <el-input type="text" placeholder="验证码" v-model="form.captcha" class="margin_top captcha"
                      maxlength="5"></el-input>
          </el-col>
          <el-col :span="2">&nbsp;</el-col>
          <el-col :span="11">
            <img id="captcha_img" class="margin_top captcha_text"/>
            <img src="../assets/img/login_user.png" style="display: none;"/>
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" style="width:100%;margin-top:16px;">登录
          </el-button>
        </el-form-item>
        <el-form-item>
          <el-link :underline="false" type="primary" href="http://learn.iflysse.com/FindPwd.aspx">忘记密码？</el-link>
        </el-form-item>
      </el-form>
      <div class="qrcode"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data () {
    return {
      form: {
        username: '',
        password: '',
        captcha: ''
      },
      rules: {
        username: [{required: true, message: '请输入身份证号码/邮箱', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        captcha: [{required: true, message: '请输入验证码', trigger: 'blur'}]
      }
    }
  }
}
</script>
<style scoped>
.login_wrap {
  background: url("../assets/img/login_bg.png") center top no-repeat;
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
}

.login_logo {
  width: 172px;
  height: 42px;
  position: absolute;
  left: 105px;
  top: 59px;
}

.login_form {
  width: 467px;
  height: 512px;
  border-radius: 23px;
  background-color: #ffffff;
  position: absolute;
  top: 120px;
  right: 100px;
  color: #ffffff;
  box-shadow: 1px 5px 5px #cccccc;
}

.login_form .el-button {
  border-radius: 22px;
  height: 54px;
  background-color: #4C4DC3;
  color: #ffffff;
  opacity: 0.8;
}

.login_form .qrcode {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 111px;
  height: 104px;
}

.login_form .captcha_text {
  border-radius: 22px;
  width: 147px;
  height: 52px;
  border: solid 1px #4F50C5;
  opacity: 0.6;
}

.margin_top {
  margin-top: 10px;
}
</style>

<style>
.login_form .el-input__inner {
  border-radius: 22px;
  height: 54px;
  background-color: #4C4DC3;
  color: #ffffff;
  opacity: 0.6;
  padding-left: 63px;
}

.login_form .account .el-input__inner {
  background: #4C4DC3 url("../assets/img/login_user.png") 20px center no-repeat;
}

.login_form .password .el-input__inner {
  background: #4C4DC3 url("../assets/img/login_pwd.png") 20px center no-repeat;
}

.login_form .captcha .el-input__inner {
  background: #4C4DC3 url("../assets/img/login_captcha.png") 20px center no-repeat;
  opacity: 0.24;
}
</style>
